<template>
  <yd-layout>
    <!-- 头部导航 -->
    <head-search slot="navbar"></head-search>
    <!-- /头部导航 -->

    <yd-scrolltab>
      <yd-scrolltab-panel :label="tab" v-for="(tab, key) in tabs" :key="key">
        <!-- 内容 -->
        <ul class="tab-content">
          <li v-for="(item,index) in content[key]" :key="index">
            <a :href="item.href">
              <img :src="item.img">
              <p>{{item.title}}</p>
            </a>
          </li>
        </ul>
        <!-- 内容 -->
      </yd-scrolltab-panel>
    </yd-scrolltab>

    <!-- 底部导航 -->
    <foot-tab slot="tabbar"></foot-tab> 
    <!-- /底部导航 -->
  </yd-layout>
</template>

<script>
export default {
  data(){
    return {
      tabs: ['热门推荐','美容彩妆','母婴专区','箱包配饰','营养保健','服饰鞋靴','数码家电','运动户外'],
      content: [
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ],
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ],
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ],
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ],
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ],
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ],
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ],
        [
          {
            img: 'static/img/log.jpg',
            title: '手机数码',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '笔记本',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '空调',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '儿童文学',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '啤酒',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '运动器材',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '衣物清洁',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '羽绒服',
            href: '#'
          },
          {
            img: 'static/img/log.jpg',
            title: '箱包',
            href: '#'
          }
        ]
      ]
    }
  }
}
</script>

<style lang="less" scoped>
ul.tab-content {
  display: flex;
  flex-wrap: wrap;
  li {
    padding-top: 0.24rem;
    width: 33.33%;
    text-align: center;
    a {
      display: block;
      img {
        width: 1.2rem;
        height: 1.2rem;
      }
      p {
        margin-top: 0.08rem;
      }
    }
  }
}
</style>
